<template>
  <div class="captcha-container">
    <div class="captcha-input-group">
      <a-input
        v-model:value="captchaCode"
        placeholder="请输入验证码"
        @pressEnter="$emit('pressEnter')"
        :maxlength="4"
        style="flex: 1"
      />
      <div class="captcha-image-wrapper" @click="refreshCaptcha">
        <img
          v-if="captchaImage"
          :src="captchaImage"
          alt="验证码"
          class="captcha-image"
        />
        <div v-else class="captcha-loading">
          <a-spin size="small" />
        </div>
        <div class="captcha-refresh-tip">点击刷新</div>
      </div>
    </div>
    <div class="captcha-help">
      <span class="help-text">请输入右侧验证码，点击图片可刷新</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits, watch } from 'vue'
import { message } from 'ant-design-vue'
import { generateCaptcha } from '@/api/captchaController'

interface Props {
  modelValue?: string
}

interface Emits {
  (e: 'update:modelValue', value: string): void
  (e: 'update:captchaKey', value: string): void
  (e: 'pressEnter'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 验证码相关状态
const captchaImage = ref<string>('')
const captchaKey = ref<string>('')
const captchaCode = ref<string>(props.modelValue || '')
const loading = ref<boolean>(false)

/**
 * 获取验证码
 */
const fetchCaptcha = async () => {
  loading.value = true
  try {
    const res = await generateCaptcha()
    if (res.data.code === 0 && res.data.data) {
      captchaImage.value = res.data.data.captchaImage || ''
      captchaKey.value = res.data.data.captchaKey || ''
      emit('update:captchaKey', captchaKey.value)
    } else {
      message.error('获取验证码失败')
    }
  } catch (error) {
    message.error('获取验证码失败')
  } finally {
    loading.value = false
  }
}

/**
 * 刷新验证码
 */
const refreshCaptcha = () => {
  captchaCode.value = ''
  emit('update:modelValue', '')
  fetchCaptcha()
}

// 监听验证码输入变化
watch(captchaCode, (newValue) => {
  emit('update:modelValue', newValue)
})

// 监听父组件传入的值变化
watch(() => props.modelValue, (newValue) => {
  if (newValue !== captchaCode.value) {
    captchaCode.value = newValue || ''
  }
})

// 组件挂载时获取验证码
onMounted(() => {
  fetchCaptcha()
})

// 暴露刷新方法
defineExpose({
  refreshCaptcha
})
</script>

<style scoped>
.captcha-container {
  width: 100%;
}

.captcha-input-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.captcha-image-wrapper {
  position: relative;
  width: 120px;
  height: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  background: #fafafa;
}

.captcha-image-wrapper:hover {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.captcha-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.captcha-loading {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.captcha-refresh-tip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.captcha-image-wrapper:hover .captcha-refresh-tip {
  opacity: 1;
}

.captcha-help {
  margin-top: 4px;
}

.help-text {
  font-size: 12px;
  color: #8c8c8c;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .captcha-input-group {
    flex-direction: column;
    gap: 8px;
  }
  
  .captcha-image-wrapper {
    width: 100%;
    height: 50px;
  }
}
</style>
